<template>
  <div class="vuex">
    <h2>
      home---{{ $store.state.home.count }}
      <br />
      home---{{ homeCount }}
      <br />
      getters---{{ $store.getters['home/getCount'] }}
      <br />
      getters---{{ getCount }}
      <br />
      <button @click="homeSubCount">-</button>
      <button @click="homeAddCount">+</button>
    </h2>
    <h2>
      tabbar---{{ $store.state.tabbar.count }}
      <br />
      {{ tabbarCount }}
      <button @click="tabbarAddCount">+</button>
    </h2>

    <hr />
    <child></child>
  </div>
</template>
<script>
import Child from './Child.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    // ...mapState('home', ['count'])
    ...mapState({
      homeCount: (state) => state.home.count,
      // homeCount(state) {
      //   console.log(state)
      //   return state.home.count
      // },
      tabbarCount: (state) => state.tabbar.count
    }),
    // ...mapGetters('home', ['getCount'])
    ...mapGetters({
      getCount: 'home/getCount'
    })
  },
  data() {
    return {}
  },
  methods: {
    // addCount() {
    //   this.$store.commit('home/ADD_COUNT', 2)
    // }
    ...mapMutations({
      homeAddCount: {
        type: 'home/ADD_COUNT',
        payload: 2
      },
      homeSubCount: {
        type: 'home/SUB_COUNT',
        payload: 2
      },
      tabbarAddCount: {
        type: 'tabbar/ADD_COUNT',
        payload: 3
      }
    })
  },
  components: {
    Child
  }
}
</script>
<style lang="scss" scoped></style>
